<template>
  <div class="alert-root">
    <transition name="alert">
      <div v-show="isShow" class="alert-msg">
        <slot>{{content}}</slot>
      </div>
    </transition>
  </div>
</template>

<script>
  module.exports = {
    name: 'Alert',

    data () {
      return {
        isShow: false,
        content: ''
      }
    },

    mounted () {
    },

    methods: {
      show (content) {
        this.isShow = true
        this.content = content
        window.clearTimeout(this.tid)
        this.tid = setTimeout(() => {
          this.isShow = false
        }, 2000)
      }
    }
  }
</script>

<style lang="stylus" scoped>

  .alert-root
    position absolute
    left 0
    bottom 2rem
    width 100%
    text-align center

    .alert-msg
      position relative
      display inline-block
      margin 0 auto
      max-width 80%
      background rgba(0, 0, 0, .6)
      border-radius 0.1rem
      color #FFF
      padding 0.3rem 0.5rem
  // 从底部出现
  .alert-enter-active, .alert-leave-active
    transition all .3s ease
  .alert-enter, .alert-leave-to
    opacity 0
    transform translateY(0.2rem)
</style>
